<template>
  <div>
    <div class="first_characters">
      总共 {{ pagination.total }} 条&nbsp;&nbsp;
      <!--第{{
      pagination.currentPage! * pagination.pageSize! - (pagination.pageSize! - 1)
    }}~{{
    pagination.currentPage! * pagination.pageSize! < pagination.total! ? pagination.currentPage! * pagination.pageSize! : pagination.total
    }}条-->
      <!-- 7-17修改 -->
      第 {{ pagination.currentPage }} / {{ pagination.pageCount || (pagination.pageSize ? Math.ceil((pagination.total || 1)
        /
        pagination.pageSize) : 1) }} 页
    </div>
    <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.total"
      :pager-count="pagination.pagerCount || 7" :page-sizes="[10, 20, 50, 100]" small class="pagination-pager"
      layout="slot, prev, pager, next, sizes, jumper" @current-change="currentChange" @size-change="sizeChange">
      <div></div>
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
export interface PaginationAttrs {
  currentPage?: number;
  pageSize?: number;
  total?: number;
  pageCount?: number;
  pagerCount?: 5 | 7 | 9 | 11 | 13 | 15 | 17 | 19 | 21;
}

const emits = defineEmits(["current-change", "size-change"]);
defineProps<{ pagination: PaginationAttrs; small?: boolean }>();

const currentChange = (value: number) => {
  emits("current-change", value);
};
const sizeChange = (value: number) => {
  emits("size-change", value);
};

onMounted(() => {
  document.getElementsByClassName(
    "el-pagination__jump"
  )[0].childNodes[0].textContent = "跳至";
});
</script>

<style lang="less">
.first_characters {
  // 7-17 单独为每页总数设置位置
  float: left;
  font-size: 14px;
  width: 200px;
  // margin-right: 12px;
}

.pagination-pager {
  margin-top: 20px;
  justify-content: flex-end;

  /deep/.el-pager li {
    font-size: 14px;
  }

  /deep/.el-pager li.is-active {
    background: #e0f2ff;
  }

  /deep/.el-pager li.is-active:hover {
    background: #e0f2ff;
  }

  /deep/.el-pager li:hover {
    background: #f3f3f6;
  }

  /deep/.el-pagination__editor.el-input {
    width: 48px;
    height: 32px;
  }

  /deep/.el-select .el-input {
    height: 32px;
    width: 98px;
  }
}
</style>
